<template>
    <div> Setup_Lifecycle </div>
</template>

<script lang="ts">
import { defineComponent, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated } from 'vue'

export default defineComponent({
    setup() {
        console.log('beforeCreate & created -> setup')
        onBeforeMount(() => {
            console.log('onBeforeMount');
        })
        onMounted(() => {
            console.log('onMounted');
        })
        onBeforeUpdate(() => {
            console.log('onBeforeUpdate');
        })
        onUpdated(() => {
            console.log('onUpdated');
        })
        onActivated(() => {
            console.log('onActivated');
        })
        onDeactivated(() => {
            console.log('onDeactivated');
        })
        onBeforeUnmount(() => {
            console.log('onBeforeUnmount');
        })
        onUnmounted(() => {
            console.log('onUnmounted');
        })
        onErrorCaptured(() => {
            console.log('onErrorCaptured');
        })
        onRenderTriggered(() => {
            console.log('onRenderTriggered');
        })
        onRenderTracked(() => {
            console.log('onRenderTracked');
        })
        // setup中避免使用this
        console.log('this', this);
    },
    beforeCreate() {
        console.log('beforeCreate')
    },
    created() {
        console.log('created')
    },
    beforeMount() {
        console.log('beforeMount');
    },
    mounted() {
        console.log('mounted');
    },
    activated() {
        console.log('activated');
    },
    deactivated() {
        console.log('deactivated');
    },
    beforeUnmount() {
        console.log('beforeUnmount');
    },
    unmounted() {
        console.log('unmounted');
    },
    errorCaptured() {
        console.log('errorCaptured');
    },
    renderTriggered() {
        console.log('renderTriggered');
    },
    renderTracked({key, target, type}) {
        console.log('renderTracked');
    },
})
</script>
